<template>
  <!-- 租户之间授权 -->
  <div class="TheTenantAuthorization">
    <div>
      <searchComponentsCss :searchData="dataModel" @searchCallBack="searchCallBack" :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :shrinkBoxOpenClose='shrinkBoxOpenClose'></searchComponentsCss>
      <div style="border-top:1px solid #E6E6E6;padding:0px 30px;margin-top:25px;"></div>
      <div class="buttons">
        <el-button type="primary" style="float:right;margin:25px 25px;" plain size="mini" @click="search_Funs">搜索</el-button>
        <!-- <rightButtons
          style="float:right;padding:10px;"
          @sunS_F='sunS_F'
          @emptySearch='emptySearch'
          @configuration='configuration'
          class="right_buttons"
        ></rightButtons> -->
      </div>
    </div>
    <div class="out" style="padding:0px 30px">
      <!-- 字典 -->
      <dictionaries :searchData="dataModel" :modelType="modelType" @optionData="dictionariesCallBack"></dictionaries>
      <!--数据列表-->
      <el-table ref="multipleTable" :data="dataAttribute" @selection-change="handleSelectionChange" v-loading.body="false" border fit max-height="511px" highlight-current-row size="mini" :cell-style="{padding:'5px 0'}">
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="45"></el-table-column>
        <el-table-column align="center" label="序号" type="index" :index="indexMethod" width="54px"></el-table-column>
        <el-table-column align="center" min-width="140px" v-for="item in dataModel" v-if="item.tableSign" :key="item.id" :label="item.CN" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>
        </el-table-column>
        <el-table-column width="180px" align="center" label="操作" fixed="right">
          <template slot-scope="scope" class="buttonSet">
            <!-- <setDealer></setDealer> -->
            <!-- <setWaterGap></setWaterGap> -->
            <!-- 添加按钮 -->
            <!-- disabled -->
            <el-button v-show="false" :disabled="showOrClose(scope.row)" style="color:#0B9AC3;border:none;" icon="el-icon-s-tools" circle @click="dialogDealerMethod(scope.row,1)"></el-button>
            <!-- v-show="scope.row.type == 0" -->
            <!-- :disabled="scope.row.type === 0 || scope.row.type === 1 ? true : false" -->
            <el-tooltip effect="dark" content="设置经销商" placement="left">
              <el-button :disabled="showOrClose2(scope.row)" style="color:#0B9AC3;border:none;" icon="el-icon-setting" circle @click="dialogDealerMethod(scope.row,2)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="设置水司" placement="right">
              <el-button :disabled="showOrClose3(scope.row)" style="color:#0B9AC3;border:none;" icon="el-icon-circle-plus-outline" circle @click="dialogDealerMethod(scope.row,3)"></el-button>
            </el-tooltip>
            <!-- v-show="scope.row.type == 0 || scope.row.type == 1" -->
            <!-- :disabled="scope.row.type === 0 || scope.row.type === 1 || scope.row.type === 2 ? true : false" -->
            <!-- :disabled="scope.row.type === 0 || scope.row.type === 1 || scope.row.type === 2 ? true : false" -->

            <!-- v-show="scope.row.type == 0 || scope.row.type == 1 || scope.row.type == 2" -->
            <!-- <el-button
              style="color:#0B9AC3;border:none;"
              icon="el-icon-view"
              circle
            ></el-button>-->
            <!-- @click="makeExaId(scope.row)" -->
            <!-- 删除按钮 -->
            <!-- <el-button
              style="color:#C90010;border:none;"
              icon="el-icon-delete"
              circle
              @click="deleteList(scope.row.id)"
            ></el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination style="margin-top:15px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagetotal"></el-pagination>

      <!-- 经销商设置弹窗 -->
      <el-dialog title="设置" :visible.sync="dialogDealer" width="520px" :before-close="handleClose" :destroy-on-close="true">
        <!-- {{idSelectArr}} -->
        <contentCheck :typeSelectArr="typeSelectArr" :idSelectArr="idSelectArr" @closedData="closedData" :key="componentUpdata"></contentCheck>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="saveSets">保 存</el-button>
          <el-button size="mini" @click="dialogDealer = false">取 消</el-button>
          <!-- dialogDealer = false -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
//引入组件
import {
  SearchCForL,
  searchComponents,
  searchComponentsCss,
  dictionaries,
  rightButtons,
} from '@/views/components/FLPage'
// 子组件
// 设置经销商
// // import setDealer from "./components/setDealer.vue"
// 设置水司
// import setWaterGap from "./components/setWaterGap.vue"
import contentCheck from './components/content.vue'
//引入api ajax
import {
  postbaseTenantInformation, //增加
  deleteBaseTenantInformation, //单项删除
  searchPageSize, //分页查询
  baseTenantInformation, //修改
  examineBaseTenantInformation, //查看
  //根据ID获取
} from '@/api/TenantInformationManagement'
import {
  findByType, //根据类型查询
  findByParentId, //根据id查询
  updateByparentId,
  //根据ID获取
} from '@/api/TheTenantAuthorization'
export default {
  components: {
    searchComponents,
    searchComponentsCss,
    SearchCForL,
    dictionaries,
    rightButtons,
    // setDealer,
    // setWaterGap,
    contentCheck,
  },
  name: 'TenantInformationManagement',
  data() {
    return {
      numSearch: 0,
      //   收缩框开关
      shrinkBoxOpenClose: false,
      childrenType: 0,
      componentUpdata: 0,
      // 保存需要的arr
      saveArrs: [],
      // 保存需要的id
      saveId: '',
      // 选中的内容
      checkeDataObj: [],
      // 内容
      typeSelectArr: [],
      idSelectArr: [],
      // 设置经销商
      // 弹窗控制
      dialogDealer: false,
      // 多选框选中内容
      checkList: ['选中且禁用', '复选框 A'],
      // indexMethods:'',
      menuTrigger: '',
      //搜索
      searchContent: {},
      //后端传来的数据
      dataAttribute: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数
      //查看的数据
      examineData: {},
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //表格中选中的数组
      multipleSelection: [],
      // 字典请求字段数据
      modelType: 'table',
      optionsZi: [],
      searchOptionTable: [],
      //数据模型
      dataModel: [
        // {
        //   EN: "id",
        //   CN: "序号",
        //   value: "",
        //   type: "input",
        //   option: [],
        //   typeFrom: "string",
        //   Exp: "",
        //   err: "·长度为3-20的所有字符!",
        //   result: true,
        //   sign: true,
        //   searchSign: false,
        //   addSign: false,
        //   tableSign: true,
        //   examineSign: true,
        //   examineDisabled: false,
        //   modificationSign: false
        // },
        {
          EN: 'sysCompanyCode',
          CN: '租户编号',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '^.{2,20}$',
          err: '·2-20的字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'name',
          CN: '租户名称',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '^.{2,20}$',
          err: '·2-20的字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'type',
          CN: '租户类型',
          value: '',
          type: 'select',
          option: [
            {
              value: 1,
              label: '是',
            },
            {
              value: 0,
              label: '否',
            },
          ],
          typeFrom: 'string',
          Exp: '',
          err: '·3-20的字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          typeGroupCode: 'we',
        },
        {
          EN: 'phone',
          CN: '手机号码',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'number',
          CN: '证件号码',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'location',
          CN: '办公地址',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'longitude',
          CN: '经度',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'latitude',
          CN: '维度',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'createDate',
          CN: '创建时间',
          value: '',
          type: 'date',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: true,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'notes',
          CN: '备注',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
      ],
      contentClickOrNo: '',
    }
  },
  created() {
    // this.forData(this.currentPage, this.pagesize);
  },
  methods: {
    // 搜索框
    getSSearchNum() {
      let searchData = this.searchData
      let num = 0
      for (let i = 0; i < searchData.length; i++) {
        const element = searchData[i]
        if (element.searchSign) {
          num += 1
        } else {
          num = num
        }
      }
      this.numSearch = num
    },
    // 配置
    configuration(msg) {
      if (msg == '配置') {
        console.log(msg)
      }
    },
    // 重置
    emptySearch(msg) {
      if (msg == '重置') {
        this.searchContent = undefined
        // this.forData(this.currentPage, this.pagesize);
      }
    },
    // 多选回传值
    closedData(newvalue) {
      console.log(this.typeSelectArr, '原有的值')
      console.log(newvalue, '新的值')

      var id = this.saveId
      var str = newvalue
      var objStr = this.typeSelectArr
      var newArr = []
      /*
        原来的 逻辑
      objStr.forEach(item => {
        for (let k = 0; k < str.length; k++) {
          let elementName = str[k];
          if (elementName.includes(item['name'])) {
            newArr.push(item);
          }
        }
      }); */
      str.forEach((item) => {
        objStr.forEach((k) => {
          if (item == k['name']) {
            newArr.push(k)
          }
        })
      })

      console.log(newArr, '要传的参数')
      this.saveArrs = newArr
      // const res = await updateByparentId(id,newArr)
      // console.log(res,'duimememe');

      // this.checkeDataObj = newvalue
      // 选项中全部的的选项
      // const typeSelectArr = this.typeSelectArr
      // for (let i = 0; i < newvalue.length; i++) {
      //   // 每一个的name值
      //   const everyName = newvalue[i];
      //   for (let j = 0; j < typeSelectArr.length; j++) {
      //     // 每一个的对象
      //     const everyObj = typeSelectArr[j];
      //     if (everyName == everyObj.name) {
      //     }
      //   }
      // }
    },
    //
    search_Funs() {
      this.forData(this.currentPage, this.pagesize, this.searchContent)
      // console.log(this.searchContent)
    },
    // 保存
    async saveSets() {
      // 弹窗关闭
      this.dialogDealer = false
      // 发axios请求
      // id是什么   obj是什么
      var id = this.saveId
      var obj = this.saveArrs
      var childrenType = this.childrenType
      const res = await updateByparentId(id, obj, childrenType)
      console.log(res, 'duime')
      if (res.flag) {
        this.$message({
          message: res.message,
          type: 'success',
        })
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
        })
      }
    },
    // 判断是否显示
    showOrClose(row) {
      if (row.type == 0) {
        return false
      } else {
        return true
      }
    },
    showOrClose2(row) {
      // console.log(row,88888888888);

      if (row.type == 0 || row.type == 1) {
        return false
      } else {
        return true
      }
    },
    showOrClose3(row) {
      if (row.type == 0 || row.type == 1 || row.type == 2) {
        return false
      } else {
        return true
      }
    },
    // 设置经销商-----
    // 关闭窗口
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          // this.idSelectArr = []
          done()
        })
        .catch((_) => {})
    },
    //点击弹窗事件
    async dialogDealerMethod(row, bNum) {
      // this.componentUpdata = this.componentUpdata + 1
      this.contentClickOrNo = '点击了'
      console.log(row)
      // [ id , type ] = row
      this.saveId = row.id
      var id = row.id
      const type = bNum
      this.childrenType = bNum
      // const type = row.type
      console.log(id, type, '888')
      console.log(row.type)

      // console.log(bNum);
      // 发送类型请求
      const res = await findByType(type)
      // const res = await findByType(row.type)
      console.log(res, 'type请求')
      this.typeSelectArr = res.data
      // 发送id请求
      const result = await findByParentId(id, type)
      console.log(result, 'id请求')
      this.idSelectArr = result.data
      console.log(this.idSelectArr, 'shenem')
      this.dialogDealer = true

      // 弹窗开启
      // 发送数据给子节点
    },
    // 设置经销商-----
    //查询组件回调
    searchCallBack(newData) {
      let obj = {}
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value
      }
      console.log(obj)
      this.searchContent = obj
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    //分页查询
    forData(page, size, content) {
      searchPageSize(page, size, content).then((response) => {
        // console.log(response);
        this.dataAttribute = response.data.list
        this.pagetotal = response.data.total
      })
    },
    //分页
    handleSizeChange(val) {
      console.log('每页 ' + val + ' 条')
      this.pagesize = val
      this.forData(this.currentPage, val, this.searchContent)
    },
    handleCurrentChange(val) {
      console.log('当前页: ' + val)
      // 序号
      // this.indexMethod()
      this.forData(val, this.pagesize, this.searchContent)
      this.currentPage = val
    },
    //搜索
    sunS_F() {
      //console.log(this.searchContent); //用这组数据去ajax查询
      this.forData(this.currentPage, this.pagesize, this.searchContent)
    },
    //增加
    toAdd(toAddData) {
      console.log('toAddData')
      console.log(toAddData)
      let obj = {}
      for (let i = 0; i < toAddData.length; i++) {
        obj[toAddData[i].EN] = toAddData[i].value
      }
      postbaseTenantInformation(obj)
        .then((response) => {
          this.forData(this.currentPage, this.pagesize, this.searchContent)
          this.$message({
            message: '添加成功',
            type: 'success',
          })
        })
        .catch(() => {
          this.$message.error('添加失败')
        })
    },
    //单项删除
    deleteList(id) {
      console.log(id)
      let arrId = [id]
      this.$confirm('确认删除？')
        .then((_) => {
          deleteBaseTenantInformation(arrId).then((response) => {
            this.forData(this.currentPage, this.pagesize, this.searchContent) //刷新列表
            this.$message({
              type: 'success',
              message: '已删除',
            })
          })
        })
        .catch((_) => {
          // this.$message({
          //   type:'warning',
          //   message:'已取消删除'
          // })
        })
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },
    // 字典组件回调
    dictionariesCallBack([a = {}, b = {}]) {
      // 正常字典
      this.optionsZi = a
      // 跨表字典
      this.searchOptionTable = b
      console.log(a, b, 66688)
      // console.log(options, 111)
      // console.log(options,'huilaide');
      // this.optionsZi = options
      this.forData(this.currentPage, this.pagesize, this.searchContent)
      // }
    },
    // 序号
    indexMethod(index) {
      var currentPage = this.currentPage
      var pagesize = this.pagesize
      this.$nextTick(function () {
        currentPage = this.currentPage
        pagesize = this.pagesize
      })
      // console.log(currentPage,pagesize,'996');
      // console.log(currentPage*pagesize+index - 9);
      return currentPage * pagesize - pagesize + 1 + index
    },
  },
  computed: {
    // 字典计算属性
    optionDatas() {
      return function (arr, val) {
        //console.log(arr[val],'why');
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].value == val) {
              // console.log(arr[i].label)
              return arr[i].label
            }
          }
        }
      }
    },
    // 判断是否显示
    // showOrClose(row){
    //   if (row.type == 1) {
    //     return true
    //   }
    //   else{
    //     return false
    //   }

    // }
  },
}
</script>
<style scoped src="@/styles/allCssP.css"></style>
<style lang="scss" scoped>
.TheTenantAuthorization {
  .shrinkBox {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    height: 25px;
    // border-bottom:1px solid #E6E6E6;
  }
  /deep/ .el-table--mini {
    .gutter {
      display: table-cell !important;
    }
    .el-checkbox__inner {
      width: 12px;
      height: 12px;
    }
    // 改变表头的高度  改为45px
    /deep/.el-table__header-wrapper {
      .el-table__header {
        .has-gutter {
          tr {
            th {
              padding: 5px 0 !important;
              height: 34px;
              line-height: 34px;
            }
            // .is-leaf{
            //   padding: 5px 0 !important;

            // }
          }
        }
      }
    }
    // 表头操作固定定位
    /deep/.el-table__fixed-right {
      .el-table__header {
        thead {
          tr {
            th {
              padding: 5px 0 !important;
              height: 34px;
              line-height: 34px;
              .cell {
                // padding-bottom: 5px !important;
                //   height: 34px;
                //   line-height: 34px;
              }
            }
          }
        }
      }
    }
  }
  .right_row {
    display: flex;
    // justify-content: start;
    align-items: center;
    position: relative;

    .buttons {
      position: absolute;
      padding: 0px !important;
      right: 30px;
    }
    .buttonhurdle {
      padding: 0px !important;
    }
  }
  .do {
    display: flex;
  }
  .pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>
